<template>
  <div>
    <el-dialog
      :title="dialogtitle"
      @close="closedislog"
      :visible="addlialogdepart"
      width="30%"
    >
      <!-- :model :rules prop v-model -->
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择活动区域">
            <el-option
              :label="item.username"
              :value="item.username"
              v-for="item in leaderlist"
              :key="item.id"
            ></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closedislog">取 消</el-button>
          <el-button type="primary" @click="addpartmentfn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getleaderapi,
  addpartmentapi,
  getpartmentapi,
  editpartmentapi
} from '@/api/departments'
export default {
  props: {
    addlialogdepart: {
      type: Boolean,
      default: false
    },
    nodedata: {
      type: Object
    },
    departslist: {
      type: Array
    }
  },
  data() {
    // rule校验相关说明
    // value 校验表单元素的值
    // callback 回调函数，无论成功与否，都要调用callback
    const validatorname = (rule, value, callback) => {
      let arr = []
      if (this.form.id) {
        // 编辑状态和自身兄弟作比对
        if (this.nodedata.name === value) {
          callback()
          return
        }
        arr = this.departslist.filter((item) => item.pid === this.nodedata.pid)
      } else {
        //  费编辑状态和自身的儿子作比对
        // 统计部门不能有重复名称
        // value根据父元素nodedata。id来找儿子，过滤所有兄弟
        // 只要value和arr中的name想的呢个，就不通过校验
        arr = this.departslist.filter((item) => item.pid === this.nodedata.id)
      }
      const bool = arr.some((item) => item.name === value)
      if (bool) {
        callback(new Error('出现了重名部门'))
      } else {
        callback()
      }
    }
    const validatorcode = (rule, value, callback) => {
      if (this.form.id && this.nodedata.code === value) {
        callback()
        return
      } else {
        const bool = this.departslist.some((item) => item.code === value)
        bool ? callback(new Error('出现了重名编码')) : callback()
      }
    }
    return {
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入部门名称',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 10,
            message: '部门名称长度在 1 到 10 个字符',

            trigger: ['blur', 'change']
          },
          {
            validator: validatorname,
            trigger: ['blur', 'change']
          }
        ],
        code: [
          {
            required: true,
            message: '请输入部门编码',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 10,
            message: '部门编码长度在 1 到 10 个字符',

            trigger: ['blur', 'change']
          },
          {
            validator: validatorcode,
            trigger: ['blur', 'change']
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入部门介绍',
            trigger: ['blur', 'change']
          },
          {
            min: 10,
            max: 300,
            message: '部门介绍长度在 10 到 300 个字符',

            trigger: ['blur', 'change']
          }
        ],
        manager: [
          {
            required: true,
            message: '请输入部门负责人',
            trigger: ['blur', 'change']
          }
        ]
      },
      leaderlist: []
    }
  },
  async created() {
    // const { data } = await getleaderapi()
    // console.log(data)
  },
  methods: {
    closedislog() {
      // 关闭弹层
      // 1.
      // this.$emit('closedilog')
      // 2.update固定写法 ,addlialogdepart父组件传过来的值，后面跟变量
      this.$emit('update:addlialogdepart', false)
      // 清空表单
      this.form = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }
      // resetFields将所有字段值重置为初始值并移除校验效果
      this.$refs.form.resetFields()
    },
    onSubmit() {
      console.log('submit!')
    },
    async getleaderfn() {
      const { data } = await getleaderapi()
      // console.log(data)
      this.leaderlist = data
    },
    addpartmentfn() {
      // 校验是否成功
      this.$refs.form.validate(async (valid, val) => {
        if (!valid) return
        if (this.form.id) {
          await editpartmentapi(this.form)
        } else {
          this.form.pid = this.nodedata.id
          await addpartmentapi(this.form)
        }
        this.$emit('reducegetpartment')
        this.closedislog()
      })
    },
    // 获取部门详情
    async getpartment() {
      const { data } = await getpartmentapi(this.nodedata.id)
      console.log(data)
      this.form = data
    }
  },
  computed: {
    dialogtitle() {
      return this.form.id ? '编辑部门' : '添加部门'
    }
  }
}
</script>

<style></style>
